<template>
  <div class="fourDetail">
    <div class="fourDetail1">
      <div class="picTURE">
        <div class="picCircle">
          <div class="picShow1" />
        </div>
      </div>
      <div class="title">
        <div style="display: flex">
          城际联动活力
          <el-popover
            placement="top-start"
            title="城际联动指数"
            width="200"
            trigger="hover"
            content="以2019年第一月份为基础指数100，衡量城市间合作程度，涵盖产业、商贸、创新等多个维度的综合环比发展程度。"
          >
            <el-button slot="reference" size="mini" style="background: transparent;border:none;margin-left: -12px " icon="el-icon-warning" />
          </el-popover>
        </div>
        <div class="picNum">
          <!--          2.5%-->
          <span style="display: inline-block;">{{ servicesData.city_index }}</span>
          <span :class="servicesData.city_index > 0 ? 'picNumPic' : 'picNumPicDown'" />
        </div>
      </div>
      <div class="fourDetailCk">
        <div class="picTURE">
          <div class="picCircle">
            <div class="picShow2" />
          </div>
        </div>
      </div>
      <div class="title">
        <div style="display: flex">
          仓储贸易活力
          <el-popover
            placement="top-start"
            title="仓储贸易活力"
            width="200"
            trigger="hover"
            content="以2019年第一月份为基础指数100，，反映仓储行业运行态势，包括库存周转、业务预期等指标的环比发展程度。"
          >
            <el-button slot="reference" size="mini" style="background: transparent;border:none;margin-left: -12px " icon="el-icon-warning" />
          </el-popover>
        </div>
        <div class="picNum">
          <!--          1.4%-->
          <span style="display: inline-block;">{{ servicesData.warehouse_index }}</span>
          <span :class="servicesData.warehouse_index > 0 ? 'picNumPic' : 'picNumPicDown'" />
        </div>
      </div>
    </div>
    <div class="fourDetail2">
      <div class="picTURE">
        <div class="picCircle">
          <div class="picShow3" />
        </div>
      </div>
      <div class="title">
        <div style="display: flex">
          科创服务活力
          <el-popover
            placement="top-start"
            title="科创服务活力指数"
            width="200"
            trigger="hover"
            content="以2019年第一月份为基础指100，衡量科技创新与服务业发展水平，反映经济增长新动能的环比发展程度。"
          >
            <el-button slot="reference" size="mini" style="background: transparent;border:none;margin-left: -12px " icon="el-icon-warning" />
          </el-popover>
        </div>
        <div class="picNum">
          <!--          -3.8%-->
          <span style="display: inline-block;">{{ servicesData.science_index }}</span>
          <span :class="servicesData.science_index > 0 ? 'picNumPic' : 'picNumPicDown'" />
        </div>
      </div>
      <div class="fourDetailCk">
        <div class="picTURE">
          <div class="picCircle">
            <div class="picShow4" />
          </div>
        </div>
      </div>

      <div class="title">
        <div style="display: flex">
          商业服务活力
          <el-popover
            placement="top-start"
            title="商业服务活力指数"
            width="200"
            trigger="hover"
            content="以2019年第一月份为基础指数100，评估商业服务行业活跃度，包括业务量、预期等关键指标的环比发展程度。"
          >
            <el-button slot="reference" size="mini" style="background: transparent;border:none;margin-left: -12px " icon="el-icon-warning" />
          </el-popover>
        </div>
        <div class="picNum">
          <!--          4.2%-->
          <span style="display: inline-block;">{{ servicesData.business }}</span>
          <span :class="servicesData.business > 0 ? 'picNumPic' : 'picNumPicDown'" />
        </div>
      </div>
    </div>
  </div>
</template>
<script >
export default {
  name: 'FourDetail',
  props: {
    servicesData: {
      type: Object,
      required: true // 确保传入的数据为数组
    }
  }
}
</script>
<style scoped lang="scss">
.fourDetail{
  position: relative;
}
.fourDetail1 {
  height: 80px;
  margin-top: 20px;
  margin-left: 30px;
  display: flex;
  position: relative;
  align-items: center;
}
.fourDetailCk{
  display: flex;
  margin-left: 20px;
  position: relative;
  align-items: center;
}
.fourDetail2{
  display: flex;
  align-items: center;
  height: 80px;
  margin-top: 20px;
  position: relative;
  margin-left: 30px;
}
.picTURE:before   {
  position: absolute;
  z-index: 1;
  content: "";
  display: block;
  animation: rotate 3s linear infinite;
  width: 60px;
  height: 60px;
  background: url("~@/assets/images/tuoyuan.png") no-repeat;
  background-size: 100% 100%;
  left: 0;
}
.picCircle{
  animation:none !important;
  width: 60px;
  height: 60px;
  background: url("~@/assets/images/circle.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.picShow1{
  animation:none !important;
  display: inline-block;
  width: 40px;
  height: 34px;
  background: url("~@/assets/images/city.png") no-repeat center center;
}
.picShow2{
  display: inline-block;
  width: 40px;
  height: 34px;
   background: url("~@/assets/images/ck.png") no-repeat center center;
 }
.picShow3{
  display: inline-block;
  width: 40px;
  height: 34px;
  background: url("~@/assets/images/kc.png") no-repeat center center;
}
.picShow4{
  display: inline-block;
  width: 40px;
  height: 14px;
  background: url("~@/assets/images/sy.png") no-repeat center center;
  background-size: 100% 100%;
}
.picNum{
  font-family: DIN;
  font-weight: bold;
  font-size: 28px;
  color: #FFFFFF;
  line-height: 34px;
}
.picNumPic{
  position: absolute;
  width: 34px;
  height: 38px;
  background: url("~@/assets/images/upgreen.png") no-repeat center center;
  }
.picNumPicDown{
  position: absolute;
  width: 38px;
  height: 38px;
  background: url("~@/assets/images/downred.png") no-repeat center center;
}
.title{
  display: inline-block;
  font-weight: 400;
  font-size: 16px;
  color: #36C4FF;
  width: 30%;
  line-height: 24px;
  margin-left: 6px;
}
</style>
